<template>
  <div>
    <!-- 下拉面板区块 -->
    <van-dropdown-menu>
      <van-dropdown-item title="综合" disabled />
      <van-dropdown-item @change="priceChange" title="价格" v-model="order" :options="priceArr" />
      <van-dropdown-item
        title="分类"
        v-model="categoryVal"
        :options="filterCategory"
        @change="categoryChange"
      />
    </van-dropdown-menu>

    <!-- 无商品区块 -->
    <van-empty v-if="goodsList.length===0" image="search" description="您搜索的产品不存在" />

    <!-- 商品列表区块 -->
    <productor v-else :goodsList="goodsList" />
  </div>
</template>
<script>
import productor from "@/components/Productor/productor.vue";
export default {
  props: ["filterCategory", "goodsList"],
  data() {
    return {
      order: 0, //价格下拉菜单的值
      categoryVal: 0, //分类下拉菜单的值
      priceArr: [
        { text: "由高到低", value: "desc" },
        { text: "由低到高", value: "asc" },
      ],
    };
  },
  mounted() {
    // 将this保存到变量中,以免this指向出问题
    let _this = this;
    // 循环filterCategory数组 判单是checked是否为true 被选中则将该项的value传入categoryVal中
    _this.filterCategory.map((element) => {
      if (element.checked) {
        _this.categoryVal = element.value;
      }
    });
  },
  methods: {
    //将分类下拉菜单数据传到popup父组件中
    categoryChange(value) {
      this.$emit("sendCategoryVal", value);
    },
    priceChange(value){
      this.$emit("priceChange", value);
    },
  },
  components: {
    productor, //产品列组件
  },
};
</script>
